<template>
  <article class="container" @click="handlecloseShow">
    <span class="iconfont popupClose">X</span>
    <div class="wrapper" @click.stop="()=>{}">
      <swiper :options="swiperOption">
        <swiper-slide v-for="(item,index)  in imgsArr" :key="index">
          <a :href="item.href" target="_bank">
             <img :src="item.src" class="gallary-img"/>
          </a>
         </swiper-slide>
         <!-- <div class="swiper-pagination" slot="pagination"></div> -->
          <div class="swiper-button-prev" slot="button-prev"></div>
          <div class="swiper-button-next" slot="button-next"></div>
      </swiper>
    </div>

  </article>

</template>
<script>
import '@/assets/css/swiper.min.css';
import { swiper, swiperSlide } from 'vue-awesome-swiper'

export default {
  components: {
    swiper,
    swiperSlide
  },
  props: {
    imgsArr: {
      type: Array,
      default() {
        return [];
      }
    },
    gallaryIndex: {
      type: [Number, String]
    }
  },
  data() {
    return {
      swiperOption: {
        initialSlide: this.gallaryIndex,
        // pagination: {
        //   el: '.swiper-pagination',
        //   type: 'fraction'
        // },
        slidesPerView: 1,
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        },
        observer: true,
        spaceBetween: 60,
        observeParents: true
      }
    };
  },
  methods: {
    handlecloseShow() {
      this.$emit('listenClose')
    }
  }
};
</script>
<style lang="scss" scoped>
.wrapper /deep/ .swiper-container {
  overflow: hidden;
}
.swiper-slide, .swiper-wrapper{
    transform: translate3d(0, -50%, 0);
}
.popupClose{
  position: fixed;
  top: 30px;
  right: 30px;
  font-size: 50px;
  color: #fff;
  cursor: pointer;
  z-index: 10000;
}
.container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  background: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  .wrapper {
    height: 0;
    width: 500px;
    max-height: 60vh;
    .gallary-img {
      width: 100%;
    }
    .swiper-pagination {
      color: #fff;
      bottom: 100px;
      font-size: 40px;
    }
  }
}
</style>
